import React, { createRef, useRef, useState } from 'react'
import { connect } from 'react-redux'
import { nanoid } from 'nanoid'

import { Menu, Input, Space, Select, Collapse } from '@arco-design/web-react';
import {
    IconApps,
    IconHighlight,
    IconBook,
    IconFontColors,
    IconEdit
} from '@arco-design/web-react/icon';
import "@arco-design/web-react/dist/css/arco.css";
import './index.css'
import { type } from '@testing-library/user-event/dist/type';
import { color } from 'd3';

const MenuItem = Menu.Item;
const SubMenu = Menu.SubMenu;
const CollapseItem = Collapse.Item;

function Sider(props) {
    const fontColor = ['blue', 'red', 'white', 'black']
    const bgColor = ['blue', 'white', 'black', 'green']
    const fontSize = ['10px', '12px', '14px', '16px', '18px', '20px', '22px', '24px', '26px', '28px', '30px', '32px', '34px']
    const Change_fontsize = (size) => {
        props.Change_fontsize(size)
    }
    const Change_bgColor = (color) => {
        props.Change_bgColor(color)
    }
    const Change_fontColor = (color) => {
        props.Change_fontColor(color)
    }
    const Change_keyword = (word) => {
        props.Change_keyword(word)
    }
    const inputword = () => {

        let keyword = document.getElementById("keyword").value;
        console.log(keyword);
        Change_keyword(keyword);
        console.log("sucess")
    }
    const Change_wordcolor = (color) => {
        props.Change_wordcolor(color)
    }


    return (
        <div>
            <div
                className='menu-demo-round'
                style={{
                    height: 600,
                }}
            >
                <Menu className={"bg"} style={{ width: 200 }} mode='pop' hasCollapseButton>
                    <SubMenu
                        key='0'
                        title={
                            <>
                                <IconApps />
                                字体大小
                            </>
                        }
                    >
                        {
                            fontSize.map(item => <MenuItem key={nanoid()} value={item}
                                onClick={() => Change_fontsize(item)}>{item}</MenuItem>)
                        }
                    </SubMenu>
                    <SubMenu
                        key='1'
                        title={
                            <>
                                <IconFontColors />
                                字体颜色
                            </>
                        }
                    >
                        {
                            fontColor.map(item => <MenuItem key={nanoid()} value={item}
                                onClick={() => Change_fontColor(item)}>{item}</MenuItem>)
                        }
                    </SubMenu>
                    <SubMenu
                        key='2'
                        title={
                            <>
                                <IconBook />
                                阅读板颜色
                            </>
                        }
                    >
                        {
                            bgColor.map(item => <MenuItem key={nanoid()} value={item}
                                onClick={() => Change_bgColor(item)}>{item}</MenuItem>)
                        }
                    </SubMenu>
                    <Collapse bordered={false} defaultActiveKey={['1']} style={{ maxWidth: 1180 }}>
                        <CollapseItem
                            header={
                                <>
                                    <IconHighlight className={'collapseIcon'} />
                                    文本高亮
                                </>
                            } name='2' >
                            <SubMenu
                                className={'highlightText'}
                                key='100'
                                title={
                                    <>
                                        <IconEdit /> 文本
                                    </>
                                }
                            >
                                <Space direction='vertical'>
                                    <Space wrap>
                                        <Input
                                            id="keyword"
                                            className={'highlightInput'}
                                            style={{ width: 350 }}
                                            onChange={() => inputword()}
                                            addAfter={
                                                <Select defaultValue='Color' showSearch style={{ width: 80 }}>
                                                    {
                                                        fontColor.map(item => <Select.Option key={nanoid()} value={item} onClick={() => Change_wordcolor(item)}>{item}</Select.Option>)
                                                    }
                                                </Select>
                                            }
                                            allowClear
                                            placeholder='Please enter'
                                        />
                                    </Space>
                                </Space>
                            </SubMenu>
                        </CollapseItem>
                    </Collapse>
                </Menu>
            </div>
        </div>
    )
}
const mapStateToProps = () => {
    return {

    }
}
const mapDispatchToProps = {
    Change_bgColor(color) {
        return {
            type: 'change_bgColor',
            payload: color
        }
    },
    Change_fontColor(color) {
        return {
            type: 'change_fontColor',
            payload: color
        }
    },
    Change_fontsize(size) {
        return {
            type: 'change_fontsize',
            payload: size
        }
    },
    Change_keyword(word) {
        console.log(word);
        return {
            type: 'change_keyword',
            payload: word
        }
    },
    Change_wordcolor(color) {
        return {
            type: "change_wordcolor",
            payload: color
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Sider)
